<template>
  <div class="process-container" ref="container">
    <div class="process-line" :style="lineStyle"></div>
    <div
      v-for="(step, index) in steps"
      :key="index"
      class="process-step"
      :ref="el => { if (el) stepRefs[index] = el }"
    >
      <div class="step-mark"></div>
      <div class="step-content">
        <div class="step-description">{{ step.description }}</div>
        <div v-if="step.person" class="step-person">{{ step.person }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    steps: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      stepRefs: [],
      lineStyle: {
        top: '0px',
        height: '0px'
      }
    }
  },
  mounted () {
    this.initProcessLine()
    window.addEventListener('resize', this.updateProcessLine)
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.updateProcessLine)
  },
  methods: {
    initProcessLine () {
      this.$nextTick(() => {
        this.stepRefs = []
        this.updateProcessLine()
      })
    },
    updateProcessLine () {
      if (!this.steps.length || !this.stepRefs.length) return

      const firstStep = this.stepRefs[0]
      const lastStep = this.stepRefs[this.steps.length - 1]

      const firstRect = firstStep.getBoundingClientRect()
      const lastRect = lastStep.getBoundingClientRect()
      const containerRect = this.$refs.container.getBoundingClientRect()

      // 计算相对位置
      const startY = firstRect.top - containerRect.top + 4 // 4px 为小圆点半径调整
      const endY = lastRect.top - containerRect.top + lastRect.height / 2

      this.lineStyle = {
        top: `${startY}px`,
        height: `${endY - startY}px`
      }
    }
  }
}
</script>
